<template>
  <view class="content">
    <div class="basket_content">
      <van-empty description="描述文字" v-if="basket.basketData.length < 1" />
      <div class="basket_card">
        <div
          class="list_box"
          v-for="(item, index) in basket.basketData"
          :key="index"
        >
          <van-checkbox
            :value="item.checked"
            @change="onChange(item)"
            class="check"
          />
          <van-card
            :price="item.price"
            :title="item.prodName"
            :thumb="item.pic"
            :desc="item.skuName"
            decimal-length="0"
            checkbox
            style="flex: 1"
          >
            <view slot="footer" class="sp">
              <span @click="onSubtract(item)">-</span>
              <input type="text" :value="item.prodCount" />
              <span @click="onAdd(item)">+</span>
            </view>
          </van-card>
        </div>
      </div>
      <div class="bar">
        <van-checkbox
          :value="basket.allChecked"
          @click="choice(item)"
          @change="SelectAll"
          class="barbox"
          >全选</van-checkbox
        >
        <span class="del" @click="delEvent">删除</span>
        <van-dialog id="van-dialog" :overlay="true" />
        <div class="combined">
          <span>合计: </span>
          <span v-if="basket.totalMoney == 0">0.00</span>
          <span v-else>￥{{ basket.totalMoney }}</span>
        </div>
        <button class="btn" @click="onClickButton">结算</button>
        <van-toast id="van-toast" />
      </div>
    </div>
  </view>
</template>

<script>
import Dialog from "@/static/vant/dialog/dialog";
import Toast from "@/static/vant/toast/toast";
import { deleteItem } from "@/services";
import { mapState, mapActions, mapMutations } from "vuex";
let basketIds = [];

export default {
  data() {
    return {
      title: "Hello",
      // allChecked: false,
      tatalArr: [],
    };
  },
  computed: {
    ...mapState(["basket"]),
  },
  methods: {
    //同步
    ...mapMutations("basket", ["settatalPayData"]),
    //异步
    ...mapActions({
      basketList: "basket/basketList",
      basketProdCount: "basket/basketProdCount",
      basketProdtotal: "basket/basketProdtotal",
      basketchange: "basket/basketchange",
      delchange:"basket/delchange"
    }),
    //单选
    onChange(item) {
      this.tatalArr = [];
      item.checked = !item.checked;
      this.basket.basketData.forEach((item) => {
        if (item.checked) {
          this.tatalArr.push(item.basketId);
        }
      });
      this.basketProdtotal(this.tatalArr);
    },
    
    // 全选
    SelectAll() {
      this.allChecked = !this.allChecked;
      if (this.allChecked) {
        this.tatalArr = [];
      } else {
        this.basket.basketData.forEach((item) => {
          item.checked = !item.checked;
          this.tatalArr.push(item.basketId);
        });
      }
      this.settatalPayData(!this.allChecked);
      // this.gettotalPay(this.tatalArr);
      this.basketProdtotal(this.tatalArr);
    },
    // 减
    onSubtract(item) {
      if (item.prodCount == 1) {
        item.prodCount = 1;
      } else {
        this.basketchange({
          count: -1,
          prodId: item.prodId,
          shopId: item.shopId,
          skuId: item.skuId,
        }).then((res) => {
          item.prodCount = item.prodCount - 1;

          this.$nextTick(() => {
            let arr = [];
            this.basket.basketData.forEach((item) => {
              if (item.checked) {
                arr.push(item.basketId);
              }
            });
            this.basketProdtotal(arr);
          });
        });
      }
    },
    // 加
    onAdd(item) {
      item.prodCount = item.prodCount + 1;
      this.basketchange({
        count: +1,
        prodId: item.prodId,
        shopId: item.shopId,
        skuId: item.skuId,
      });
      this.$nextTick(() => {
        let arr = [];
        this.basket.basketData.forEach((item) => {
          if (item.checked) {
            arr.push(item.basketId);
          }
        });
        this.basketProdtotal(arr);
      });
    },

    onClickButton() {
      let flag = this.basket.basketData.some((item) => item.checked);
      if (flag) {
        console.log(this.tatalArr);
        wx.navigateTo({
          url: `/pages/submitOrder/index?basketIds=${this.tatalArr}`,
        });
      } else {
        Toast("请选择商品");
      }
    },
    // 删除
    delEvent() {
      if (!this.tatalArr.length) {
        Toast("请选择商品");
      } else {
        Dialog.confirm({
          title: "",
          message: "确定要删除选中的商品吗？",
        })
          .then(async () => {
            await this.delchange([...this.tatalArr]);
             location.reload(); 
          })
          .catch(() => {
            // on cancel
          });
      }
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
  },
  mounted() {
    this.basketList();
  },
  
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: #ccc */
}
.basket_content {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.basket_card {
  flex: 1;
  margin-top: 20rpx;
}
.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.list_box {
  display: flex;
  align-items: center;
  background-color: #fff;
}
.check {
  margin-left: 12rpx;
  margin-right: -10rpx;
}
.sp {
  position: absolute;
  bottom: 30rpx;
  right: 40rpx;
  display: block;
  float: right;
}
.van-card {
  background-color: #fff !important;
  position: relative;
  height: 250rpx;
  padding: 30rpx 0rpx !important;
  padding-right: 64rpx !important;
  border-top: solid 1px #f4f4f4;
  margin-top: -1rpx;
  margin-bottom: 30rpx;
}
.van-card__desc {
  color: #999;
  display: inline-block;
  -webkit-line-clamp: 1;
  height: 48rpx;
  line-height: 48rpx;
  background: #f9f9f9;
  padding: 0 10rpx 0 10rpx;
  border-radius: 4rpx;
  margin: 10rpx 0 0rpx 0;
  overflow: hidden;
  font-size: 24rpx;
  position: relative;
  font-family: arial;
}
.sp span {
  width: 56rpx;
  height: 56rpx;
  background-color: #fff;
  line-height: 56rpx;
  border: 2rpx solid #d9d9d9;
  text-align: center;
  font-size: 42rpx;
  float: left;
}
.sp input {
  width: 56rpx;
  height: 56rpx;
  background-color: #fff;
  border: 2rpx solid #d9d9d9;
  text-align: center;
  font-size: 32rpx;
  float: left;
}
.del {
  margin-left: 30rpx;
  color: red;
}
.bar {
  width: 100%;
  height: 110rpx;
  background-color: #fff;
  display: flex;
  position: fixed;
  bottom: 0rpx;
  line-height: 110rpx;
}

radio {
  margin-left: 20rpx;
}

radio .wx-radio-input.wx-radio-input-checked {
  border: 2rpx solid #eb2444 !important; /* 选中状态外圈边框颜色*/
  background-color: #eb2444 !important; /* 外圈边框与内圈实心圆间的内容的颜色，默认上边的绿色*/
}
.bar .del {
  color: red;
  line-height: 120rpx;
  font-size: 29rpx;
  margin: 0 30rpx;
}
.combined {
  flex: 1;
  line-height: 120rpx;
}
.combined span:nth-child(2) {
  margin-left: 10rpx;
  color: red;
}
.btn {
  width: 200rpx;
  background-color: #eb2444;
  border-radius: 0rpx;
  color: #fff;
  line-height: 120rpx;
  font-size: 30rpx;
}
.van-checkbox__icon-wrap {
  line-height: 110rpx !important;
}
</style>
